<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
	xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers">
	<f:layout name="ImageManipulation" />

	<f:section name="Main">
		<f:if condition="{isAllowedFileExtension} && {image.properties.width}">
			<f:then>
				<f:if condition="{config.readOnly}">
					<f:else>
						<div class="form-control-wrap">
							<input type="hidden" id="{formEngine.field.id}"
									name="{formEngine.field.name}"
									value="{formEngine.field.value}"
									data-formengine-validation-rules="{formEngine.validation}"/>
							<button class="btn btn-default t3js-image-manipulation-trigger"
									data-url="{wizardUri}"
									data-payload="{wizardPayload}"
									data-preview-url="{previewUrl}"
									data-severity="notice"
									data-modal-title="{f:render(partial: 'ModalTitle', section:'Main', arguments: _all)}"
									data-image-uid="{image.uid}"
									data-crop-variants="{config.cropVariants -> f:format.json()}"
									data-button-preview-text="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.preview')}"
									data-button-dismiss-text="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.cancel')}"
									data-button-save-text="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.accept')}"
									data-file-field="{config.file_field}"
									data-field="{formEngine.field.id}">
								<span class="t3-icon fa fa-crop"></span>
								<f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.open-editor"/>
							</button>
						</div>
					</f:else>
				</f:if>
				<div class="row media-gallery__list">
					<f:for each="{config.cropVariants}" as="cropVariant">
						<div class="col-xs-6 col-sm-4 col-md-3 media-gallery__item">
							<p>
								<b><f:translate id="{cropVariant.title}" default="{cropVariant.title}" /></b><br/>
								<f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>: <span class="t3js-image-manipulation-selected-ratio" data-crop-variant-id="{cropVariant.id}"><f:translate id="{cropVariant.allowedAspectRatios.{cropVariant.selectedRatio}.title}" default="{cropVariant.allowedAspectRatios.{cropVariant.selectedRatio}.title}" /></span>
							</p>
							<div class="t3js-image-manipulation-preview media-object"
								data-preview-height="150"
								data-crop-variant-id="{cropVariant.id}">
								<f:image image="{image}" crop="{formEngine.field.value}"
										 cropVariant="{cropVariant.id}"
										 maxHeight="150"
										 class="thumbnail thumbnail-status"
										 additionalAttributes="{data-crop-variant: '{cropVariant -> f:format.json()}', data-crop-variant-id: cropVariant.id}"/>
							</div>
						</div>
					</f:for>
				</div>
			</f:then>
			<f:else>
				<div class="media-body">
				<f:if condition="{image.properties.width}">
					<f:then>
						<p>
							<em>
								<f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.supported-types-message" /><br/>
								{config.allowedExtensions -> f:format.case(mode: 'upper')}
							</em>
						</p>
					</f:then>
					<f:else>
						<div class="alert alert-info">
							<h4>
								<f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-dimensions"/>
							</h4>
							<p>
								<f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-dimensions-message"/>
							</p>
						</div>
					</f:else>
				</f:if>
				</div>
			</f:else>
		</f:if>
	</f:section>
</html>
